<template>
<section>
    <div class="foot-tab">
        <div class="foot-tab-div" v-for="(item, index) in tabs" :key="index" @click="footTabChange(item.path)">
            <div class="foot-tab-name">
                <div class="foot-icon" v-if="item.path == path"></div>
                <div class="foot-icon-active" v-else></div>
            </div>
            <div class="foot-tab-name" :class="{'foot-tab-name-active': item.path == path}">{{item.name}}</div>
        </div>
    </div>
    <div class="foot-tab-div"></div>
</section>
</template>

<script>
export default {
  data () {
    return {
      tabs: [
        {
          name: '鱼缸',
          path: 'home'
        },
        {
          name: '设备',
          path: 'facility'
        },
        {
          name: '实验室',
          path: 'laboratory'
        },
        {
          name: '统计',
          path: '*'
        },
        {
          name: '我的',
          path: 'Message'
        }
      ],
      path: ''
    }
  },
  methods: {
    footTabChange (path) {
      this.$router.push({path: '/' + path})
    }
  },
  mounted () {
    let path = this.$route.path.split('/')
    this.path = path[1]
  }
}
</script>

<style scoped>
.foot-tab-div{
    height: 98px;
    width: 750px;
}
.foot-tab{
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 750px;
  z-index: 9999;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 25px;
  height: 98px;
  border-top:1px solid #e0e0e0;
}
.foot-tab-div{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.foot-tab-name{
  margin-top: 10px;
  font-weight: normal;
  color: #999;
}
.foot-tab-name-active{
  font-weight: bold;
  color: #009EEA;
}
.foot-icon{
  width:39px;
  height:39px;
  background:linear-gradient(35deg,rgba(0,186,255,1),rgba(11,155,238,1));
  border-radius:50%;
}
.foot-icon-active{
  width:29px;
  height:29px;
  border:5px solid rgba(153,153,153,1);
  border-radius:50%;
}
</style>
